<template>
  <list-frame :show-advance-query="false" :total="queryForm.total" :table-data="userList" :columns="columns"
    @page-changed="onPageChanged" @size-changed="onSizeChanged" @query="onQuery" :operation-width="240">
    <template #base>
      <el-input v-model="queryForm.realName" placeholder="检索姓名" style="width: 120px;"></el-input>
      <el-input v-model="queryForm.userName" placeholder="检索登录名" style="width: 120px;margin-left: 4px;"></el-input>
      <el-select v-model="queryForm.role" placeholder="选择角色" style="width: 120px;margin-left: 4px;" clearable>
        <el-option v-for="role in roleList" :key="role.code" :label="role.name" :value="role.code"></el-option>
      </el-select>
    </template>
    <template #append>
      <el-button type="primary" color="#626aef" @click="onUserCreate">添加用户</el-button>
      <create-view :visible="createUserViewVisible" :guid="currentUserGuid" @close="onUserCreateClosed"></create-view>
      <update-pwd-view :visible="updateUserPwdViewVisible" :guid="currentUserGuid" :real-name="currentUserName"
        @close="updateUserPwdViewVisible = false"></update-pwd-view>
    </template>
    <template #operations="row">
      <el-text v-if="checkIsAdmin(row)" type="danger">系统默认用户</el-text>
      <template v-else>
        <el-button link type="primary" size="default" @click="onUpdate(row)">编辑</el-button>
        <el-button link type="primary" size="default" @click="onPwdUpdate(row)">修改密码</el-button>
        <el-button link type="danger" size="default" @click="onDelete(row)">删除</el-button>
      </template>
    </template>
  </list-frame>
</template>
<script lang="ts" setup>
import type { ColumnType } from '@/components/types';
import ListFrame from '@/components/ListFrame/ListFrame.vue';
import ApiTree from '@/server/api-tree';
import type { RoleVO } from '@/server/role/types';
import type { QueryUserVO, UserVO } from '@/server/user/types';
import { onMounted, ref } from 'vue';
import CreateView from './CreateView.vue';
import UpdatePwdView from './UpdatePwdView.vue';
import ElConfirm from '@/components/ElConfirm';
/** 表格属性 */
const columns = ref<ColumnType[]>([
  { prop: "realName", colName: "姓名", width: 0 },
  { prop: "userName", colName: "登录名", width: 0 },
  { prop: "roleName", colName: "角色", width: 0 },
  { prop: "cuser", colName: "创建人", width: 0 },
  { prop: "ctime", colName: "创建时间", width: 0 },
]);
const checkIsAdmin = (row: { value: UserVO }) => {
  return row.value.role === "ADMIN"
}
/** 查询用户列表 */
const queryForm = ref<QueryUserVO>({
  userName: "",
  realName: "",
  role: "",
  pageNo: 1,
  pageSize: 30,
  total: 0
});
const userList = ref<UserVO[]>([])
const reload = () => {
  queryForm.value.pageNo = 1;
  queryForm.value.userName = "";
  queryForm.value.realName = "";
  queryForm.value.role = "";
  getUserList();
}
const getUserList = async () => {
  const { data, totalCount } = await ApiTree.user.page(queryForm.value);
  if (data) {
    userList.value = data;
    queryForm.value.total = totalCount;
  }
}

const onPageChanged = (pageNo: number) => {
  queryForm.value.pageNo = pageNo;
  getUserList();
}
const onSizeChanged = (pageSize: number) => {
  queryForm.value.pageSize = pageSize;
  getUserList();
}
const onQuery = () => {
  queryForm.value.pageNo = 1;
  getUserList();
}
/** 获取系统配置的角色 */
const roleList = ref<RoleVO[]>([])
const getRoleList = async () => {
  const { data } = await ApiTree.role.getRole();
  if (data) {
    roleList.value = data;
  }
}
/** 添加用户 */
const currentUserGuid = ref("");
const createUserViewVisible = ref(false)
const onUserCreate = () => {
  currentUserGuid.value = "";
  createUserViewVisible.value = true;
}
const onUserCreateClosed = (reloadTable: boolean) => {
  if (reloadTable) {
    reload();
  }
  createUserViewVisible.value = false;
}
/** 编辑用户 */
const onUpdate = (row: { value: UserVO }) => {
  currentUserGuid.value = row.value.guid;
  createUserViewVisible.value = true;
}
/** 修改用户密码 */
const updateUserPwdViewVisible = ref(false)
const currentUserName = ref("");
const onPwdUpdate = (row: { value: UserVO }) => {
  currentUserGuid.value = row.value.guid;
  currentUserName.value = row.value.realName;
  updateUserPwdViewVisible.value = true;
}
/** 删除用户 */
const onDelete = (row: { value: UserVO }) => {
  const data = row.value as UserVO;
  ElConfirm(`确定要删除用户${data.realName}吗？`).then(async () => {
    const { success } = await ApiTree.user.delete(data.guid);
    if (success) {
      reload();
    }
  }).catch();
}
onMounted(() => {
  getUserList();
  getRoleList();
})
</script>
<style lang="scss" scope></style>
